<template>
  <FrontSideTable
    dataUrl="/sys/road/getList"
    addUrl="/sys/road/add"
    editUrl="/sys/road/edit"
    deleteUrl="/sys/road/delete"
    tableTitle="路线列表"
    searchHint="根据路线编号查找"
    :searchProps="searchProps"
    :columns="columns"
    :form="form"
    :rules="rules"
    @beforeAdd="beforeAdd"
    @beforeEdit="beforeEdit"
    @onCreated="onCreated">
    <template slot="form">
      <!--  新增或编辑表单  -->
      <el-form-item label="路线编号" prop="roadNo">
        <el-input v-model="form.roadNo" placeholder="输入路线名称"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.notes"></el-input>
      </el-form-item>
    </template>
  </FrontSideTable>
</template>

<script>
  import FrontSideTable from "../../template/FrontSideTable.vue"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils"

  let oldRoadNo = "";

  export default {
    name:"RoadManagement",
    data() {
      let roadNoValidator = (rule, value, callback)=>{
        //判断路线号格式
        if (!new RegExp("^\\w+$", "g").test(value)) {
          callback(new Error("路线号格式应为：G104、S334...等"));
        }
        //判断路线号是否重复
        if(value === oldRoadNo) {
          callback();
        }else {
          if (this.dataList.some(item => item.roadNo === value)) {
            callback(new Error("路线号重复"));
          } else {
            callback();
          }
        }
      };
      return {
        /*  查询的字段  */
        searchProps:["roadNo"],

        /*  路线集合 */
        dataList:[],

        /*  路线表单  */
        form:{
          roadNo:"",
          notes:""
        },

        /*  表格显示的列  */
        columns:[
          {prop:"roadNo", label:"路线编号"},
          {prop:"notes", label:"备注"}
        ],

        /*  表单校验规则  */
        rules:{
          roadNo:[
            {required:true, message:"请输入路线号", trigger:"blur"},
            {validator:roadNoValidator, trigger:"blur"}
          ]
        }
      }
    },

    methods: {

      //组件创建时的事件，获取数据
      onCreated(dataList) {
        this.dataList = dataList;
      },

      //弹出新增对话框
      beforeAdd() {
        oldRoadNo = "";
        clearFields(this.form);
      },

      //弹出编辑对话框
      beforeEdit(data) {
        oldRoadNo = data.roadNo;
        this.form = {...data};
      }
    },
    components:{FrontSideTable}
  }
</script>



// WEBPACK FOOTER //
// RoadManagement.vue?7d616f87